<template>
  <div class="user-page">
    <!-- 布局 -->
    <el-row :gutter="10">
      <!-- 左侧 -->
      <el-col :span="8">
        <div>
          <div style="display: flex">
            <!-- 搜索表单 -->
            <el-form inline size="small">
              <el-form-item>
                <el-input placeholder="输入关键字搜索">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </el-form>
            <!-- 筛选全部按钮 -->
            <el-button type="primary" style="height: 32px; line-height: 0"
              >全部</el-button
            >
          </div>

          <!-- 树形组件 -->
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            class="tree"
          >
            <!-- <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span class="btn">
                <el-button
                  type="text"
                  size="mini"
                  @click.prevent="() => append(data)"
                  >添加</el-button
                >
                <el-button
                  type="text"
                  size="mini"
                  @click.prevent="() => remove(node, data)"
                  >删除</el-button
                >
              </span>
            </span> -->
          </el-tree>
        </div>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="16">
        <!-- 头部盒子 -->
        <div class="header">
          <!-- <div style="display: inline-block"></div> -->
          <!-- 分类标题 -->
          <!-- <div class="title">当前分类：全部</div> -->
          <div class="form">
            <!-- 搜索表单 -->
            <!-- <el-form :inline="true" size="small">
              <el-form-item>
                <el-input>
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </el-form> -->
            <el-button type="primary" size="small" @click="add"
              >新增菜单</el-button
            >
            <!-- <el-button type="primary"></el-button> -->
          </div>
        </div>
        <!-- table表格 -->
        <div class="table">
          <el-table
            :data="tableData"
            style="width: 100%"
            height="500"
            :header-row-style="{ 'background-color': '#ccc' }"
          >
            <el-table-column prop="Code" label="名称"></el-table-column>
            <el-table-column prop="Name" label="标识"></el-table-column>
            <el-table-column
              prop="CustomProperty1"
              label="描述"
            ></el-table-column>

            <el-table-column prop="address" label="操作" width="150">
              <template>
                <el-button size="mini" @click="edit">编辑</el-button>
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @confirm="confirmDel"
                >
                  <el-button
                    style="margin-left: 10px"
                    size="mini"
                    type="danger"
                    slot="reference"
                    >删除</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      :title="title"
      :visible.sync="showDialog"
      width="35%"
      :before-close="handleClose"
    >
      <el-form
        ref="AddForm"
        :model="AddForm"
        label-width="100px"
        style="width: 70%"
      >
        <el-form-item label="请选择系统" prop="region">
          <el-select placeholder="请选择系统" style="width: 300px">
            <el-option label="系统一" value="shanghai"></el-option>
            <el-option label="系统二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择页面" prop="region">
          <el-select placeholder="请选择系统" style="width: 300px">
            <el-option label="页面一" value="shanghai"></el-option>
            <el-option label="页面二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单名称" prop="region">
          <el-input placeholder="请输入菜单名称" style="width: 300px">
          </el-input>
        </el-form-item>
        <el-form-item label="菜单显示名称" prop="region">
          <el-input placeholder="请输入菜单显示名称" style="width: 300px">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmitAdd"
            >确定</el-button
          >
          <el-button size="small" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      nodes: [],
      defaultProps: {
        label: "name",
        children: "children",
      },
      tableData: [],
      showDialog: false,
      title: "新增菜单",
    };
  },
  created() {},
  methods: {
    onSubmitAdd() {
      this.handleClose();
    },
    add() {
      this.title = "新增菜单";
      this.showDialog = true;
    },
    edit() {
      this.title = "编辑菜单";
    },
    // 确认删除的回调
    confirmDel() {
      this.$message.success("删除成功");
    },
    // 保存提交
    onSubmit() {
      this.$refs.ruleForm.validate((isOk) => {
        console.log(isOk);
      });
    },
    // 取消
    cancel() {
      this.handleClose();
    },
    handleClose() {
      this.showDialog = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.user-page {
  background-color: #fff;
  padding: 70px 30px;

  .tree {
    .btn {
      opacity: 0;
      // margin-left: 100px;

      &:hover {
        opacity: 100;
      }
    }
  }

  .header {
    width: 100%;
    overflow: auto;

    .title {
      float: left;
      font-weight: 700;
    }

    .form {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>